<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="">
<meta http-equiv="x-dns-prefetch-control" content="on">
<title>选择目的地</title>
<link rel="stylesheet" href="../imgv2/css/default.min.css" />
<link href="../imgv2/css/css.css" rel="stylesheet" type="text/css">
<style>
button{
  white-space: nowrap;
}
</style>
</head>

<body class="whitebg">
<!--wrap start-->
<section id="wrap">
     <section class="titlebar">选择目的地</section>
     <section class="seracharea">
             <div class="searchbg">
                  <li class="left dect"><a href="javascript:void(0);" class="txt-address"><i class="iconfont orange">&#xe606;</i><i class="txtAddress">上海</i></a></li>
                  <li class="left searchform"><input id="txtSearchKeys" type="text" class="searchinput" ></li>
                  <li class="right btn"><button id="btnSearch" class="searchbtn button" onClick="this.className='button_d searchbtn'" onmouseout="this.className='searchbtn button'">搜索</button></li>
             </div>
             <div id="result" name="result"></div>
     </section>
     <section class="citylist whitebg z1">
         <!--  <a href="javascript:void(0);">
          <ul class="listitem h120 bottomline">
              <li class="triptitle mt10">人民广场</li>
              <li class="tripinfo">
                  <p class="peoplenumber">上海 黄浦</p>
              </li>
          </ul>
          </a>
          <a href="javascript:void(0);">
          <ul class="listitem h120 bottomline">
              <li class="triptitle mt10">人民广场</li>
              <li class="tripinfo">
                  <p class="peoplenumber">上海 黄浦</p>
              </li>
          </ul>
          </a>
          <a href="javascript:void(0);">
          <ul class="listitem h120 bottomline">
              <li class="triptitle mt10">人民广场</li>
              <li class="tripinfo">
                  <p class="peoplenumber">上海 黄浦</p>
              </li>
          </ul>
          </a> -->
      </section>
</section>
<div id="mapContainer"></div>
		<div class="iframe-containter">
		</div>
</body>
<script src="../jsv2/jQuery/jquery-1.11.2.min.js"></script>
<script src="../jsv2/common.js"></script>
	<script src="http://webapi.amap.com/maps?v=1.3&key=57c58c7b1f94514317df97e3a985962c"></script>
	<script src="../jsv2/journey/operateData.js"></script>
	<script src="../jsv2/AMapCommon.js"></script>
	<script>
		var parentwin = window.parent,
			city = {},
			kmap;
		$(function() {
			var p = $('#txtSearchKeys').position();
			$('#result').css({
				//'left': p.left - 4 + 'px',
				'top': p.top + 41 + 'px'/*,
				'width': $('#txtSearchKeys').width()*/
			});
			$('#btnSearch').on('click', function() {
				if ($('#txtSearchKeys').val() == '') {
					return false;
				}
				kmap.placeSearch($('#txtSearchKeys').val(), $('.txt-address').data('citycode'), function(status, result) {
					var lis = [],
						li;
					if (status === 'complete' && result.info === 'OK') {
						var d, l = result.poiList.pois.length;
						for (var i = 0; i < l; i++) {
							d = result.poiList.pois[i];
							lis.push($('<li>').html('<em>' + d.name + '</em><span>' + d.address + '</span>').data('address', d));
						}
						l == 0 ? lis.push($('<li>').html("π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字")) : '';
					} else {
						lis.push($('<li>').html("π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"));
					}
					$('.citylist ul').empty().append(lis);
				});
			});
			$('.txt-address').on('click', function() {
				setIframeSrc('city_list.html');
			});
			$('.address-list').on('click', 'li', function(e) {
				var tar = $(e.target);
				tar = tar[0].tagName == 'LI' ? tar : tar.parent();
				var address = tar.data('address');
				address['city']=city;
				
				parentwin && parentwin.setIframeContentValue('txtJourneyDestination', address.name, {
					address: address
				});
			});
			//初始化地图
			kmap = new KAMap({
				render: 'mapContainer'
			});
			kmap.mapInit();
			//$('#txtSearchKeys').focus();//默认页面加载的时候就将焦点定位
			$(document).on('keydown', function(e) {
				if (e.keyCode == 13) { //回车事件
					$('#btnSearch').click();
				}
			});
			$('#txtSearchKeys').on('keyup', function(e) {
				keydown(e);
			});
		});

		function setIframeContentValue(value) {
			$('.txtAddress').html(value);
			kmap.getCityCode(value, function(result) {
				city = result;
				$('.txt-address').data('citycode',city.citycode);
			});
			closeIframeContent();
		}

		function keydown(event) {
			var key = (event || window.event).keyCode;
			var result = document.getElementById("txtSearchKeys")
			var cur = result.curSelect;
			if (key === 40) { //down
				if (cur + 1 < result.childNodes.length) {
					if (result.childNodes[cur]) {
						result.childNodes[cur].style.background = '';
					}
					result.curSelect = cur + 1;
					result.childNodes[cur + 1].style.background = '#CAE1FF';
					document.getElementById("txtSearchKeys").value = result.tipArr[cur + 1].name;
				}
			} else if (key === 38) { //up
				if (cur - 1 >= 0) {
					if (result.childNodes[cur]) {
						result.childNodes[cur].style.background = '';
					}
					result.curSelect = cur - 1;
					result.childNodes[cur - 1].style.background = '#CAE1FF';
					document.getElementById("txtSearchKeys").value = result.tipArr[cur - 1].name;
				}
			} else if (key === 13) {
				var res = document.getElementById("txtSearchKeys");
				if (res && res['curSelect'] !== -1) {
					selectResult(document.getElementById("txtSearchKeys").curSelect);
				}
			} else {
				autoSearch();
			}
		}

		function autoSearch() {
				var keywords = document.getElementById("txtSearchKeys").value;
				var cityName = $(".txtAddress").html();
				if (cityName == null || cityName.trim() == "") {
					alert("请先输入城市!");
					return false;
				}
				kmap.autoSearch(keywords, cityName, autocomplete_CallBack);
			}
			//输出输入提示结果的回调函数

		function autocomplete_CallBack(status, data) {
				var resultStr = "";
				var tipArr = data.tips;
				if (tipArr && tipArr.length > 0) {
					for (var i = 0; i < tipArr.length; i++) {
						resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>" + tipArr[i].district + "</span></div>";
					}
				} else {
					resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
				}
				document.getElementById("result").curSelect = -1;
				document.getElementById("result").tipArr = tipArr;
				document.getElementById("result").innerHTML = resultStr;
				document.getElementById("result").style.display = "block";
			}
			//输入提示框鼠标滑过时的样式

		function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip 
				thiss.style.background = '#CAE1FF';
			}
			//输入提示框鼠标移出时的样式

		function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复 
			thiss.style.background = "";
		}

		function selectResult(index) {
				if (index < 0) {
					return;
				}
				if (navigator.userAgent.indexOf("MSIE") > 0) {
					document.getElementById("txtSearchKeys").onpropertychange = null;
					document.getElementById("txtSearchKeys").onfocus = focus_callback;
				}
				//截取输入提示的关键字部分
				var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g, "");
				var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
				document.getElementById("txtSearchKeys").value = text;
				document.getElementById("result").style.display = "none";
				//根据选择的输入提示关键字查询
				kmap.mapObj.plugin(["AMap.PlaceSearch"], function() {
					var msearch = new AMap.PlaceSearch(); //构造地点查询类
					AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
					msearch.setCity(cityCode);
					msearch.search(text); //关键字查询查询
				});
			}
			//输出关键字查询结果的回调函数

		function placeSearch_CallBack(data) {
			//清空地图上的InfoWindow和Marker
			windowsArr = [];
			marker = [];
			kmap.mapObj.clearMap();
			var resultStr1 = "";
			var poiArr = data.poiList.pois;
			var resultCount = poiArr.length;
			for (var i = 0; i < 1; i++) {
				latLon = poiArr[i].location;
				resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
				resultStr1 += kmap.tipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
				//kmap.addmarker(i, poiArr[i]);
			}
			kmap.mapObj.setFitView();
		}
	</script>
</html>
